<template>
	<div>
		<div class="w100  bgfff bra8">
			<div class="displayFlexBet" style="padding-bottom: 10px;border-bottom: 1px solid#F8F7F9;padding:27px 20px">
				<div>
					<span>{{dataList1.outletName}}</span>
					<span>{{dataList1.outletNo}}</span>
				</div>
				<div style="color: #888;font-size: 13px;" v-if="chooseItem.source">
					<span>数据来源于{{chooseItem.source}}</span>
					<span v-if="chooseItem.dateStr">，更新于{{chooseItem.dateStr}}</span>
				</div>
			</div>
			<div class="displayFlex w100" style="flex-wrap: nowrap;overflow-y: auto;padding:11px 34px 22px">
				<div v-for="(item,index) in dataList1.defenceList" :key="index" class="mr20 point"
					@click="chooseDefence(item)">
					<div style="color: #888;padding-left: 20px" class="mb16"
						:style="{'color':params.defenceId == item.defenceId?'#3A3EF4':''}">{{item.defenceName}}</div>
					<div style="background: #EEF3F6;height: 136px;width: 240px;position: relative;overflow-y: auto;"
						class="pad20 bra8">
						<div v-for="(item2,index2) in item.parameterList" :key="index2"
							style="width: 50%;display: inline-block;"
							:class="index2 == (item.parameterList.length - 1)?'':'mb20'">
							<div class="font13 textOver" style="color: #666;">{{item2.parameterName}}</div>
							<div class="font18" style="color: #333;" v-if="''+item2.amount">
								{{item2.amount}}{{item2.unitCode}}
							</div>
							<div class="font18" style="color: #333;" v-else>
								--
							</div>
						</div>

						<div v-if="item.parameterList && item.parameterList.length == 0">
							暂无参数
						</div>

						<img v-if="item.result == 'ABNORMAL'" src="@/assets/sIcon110.png"
							style="position: absolute;bottom: 10px;right: 10px;width: 40px;height: 20px;" />
						<img v-if="item.result == 'NORMAL'" src="@/assets/sIcon111.png"
							style="position: absolute;bottom: 10px;right: 10px;width: 40px;height: 20px;" />
					</div>
				</div>
			</div>
		</div>

		<div class="w100  bgfff bra8 mt10 displayFlex" style="padding:20px 34px">
			<div :class="[menuIndex == 'one'?'selected':'']" class="displayFlex point" @click="menuIndex = 'one'">
				<img v-if="menuIndex == 'one'" src="@/assets/sIcon113.png" style="width:15px;height:15px" />
				<img v-else src="@/assets/sIcon112.png" style="width:15px;height:15px" />
				<span class="ml5">概览</span>
			</div>

			<span style="color: #EDECF1;margin: 0 34px;">|</span>
			<div :class="[menuIndex == 'two'?'selected':'']" class="displayFlex point" @click="menuIndex = 'two'">
				<img v-if="menuIndex == 'two'" src="@/assets/sIcon115.png" style="width:15px;height:15px" />
				<img v-else src="@/assets/sIcon114.png" style="width:15px;height:15px" />
				<span class="ml5">台账</span>
			</div>
			<span style="color: #EDECF1;margin: 0 34px;">|</span>
			<div :class="[menuIndex == 'three'?'selected':'']" class="displayFlex point" @click="menuIndex = 'three'">
				<img v-if="menuIndex == 'three'" src="@/assets/sIcon117.png" style="width:15px;height:15px" />
				<img v-else src="@/assets/sIcon116.png" style="width:15px;height:15px" />
				<span class="ml5">巡检记录</span>
			</div>
			<span style="color: #EDECF1;margin: 0 34px;">|</span>
			<div :class="[menuIndex == 'four'?'selected':'']" class="displayFlex point" @click="menuIndex = 'four'">
				<img v-if="menuIndex == 'four'" src="@/assets/sIcon119.png" style="width:15px;height:15px" />
				<img v-else src="@/assets/sIcon118.png" style="width:15px;height:15px" />
				<span class="ml5">辅料（药剂）</span>
			</div>
			<span style="color: #EDECF1;margin: 0 34px;">|</span>
			<div :class="[menuIndex == 'five'?'selected':'']" class="displayFlex point" @click="menuIndex = 'five'">
				<img v-if="menuIndex == 'five'" src="@/assets/sIcon121.png" style="width:15px;height:15px" />
				<img v-else src="@/assets/sIcon120.png" style="width:15px;height:15px" />
				<span class="ml5">运行参数（DCS）</span>
			</div>
			<span style="color: #EDECF1;margin: 0 34px;">|</span>
			<div :class="[menuIndex == 'seven'?'selected':'']" class="displayFlex point" @click="menuIndex = 'seven'">
				<img v-if="menuIndex == 'seven'" src="@/assets/sIcon123.png" style="width:15px;height:15px" />
				<img v-else src="@/assets/sIcon122.png" style="width:15px;height:15px" />
				<span class="ml5">异常工况</span>
			</div>
			<span style="color: #EDECF1;margin: 0 34px;">|</span>
			<div :class="[menuIndex == 'six'?'selected':'']" class="displayFlex point" @click="menuIndex = 'six'">
				<img v-if="menuIndex == 'six'" src="@/assets/sIcon123.png" style="width:15px;height:15px" />
				<img v-else src="@/assets/sIcon122.png" style="width:15px;height:15px" />
				<span class="ml5">检修</span>
			</div>
		</div>

		<div v-show="menuIndex == 'one'" class="w100  bgfff bra8 pad10 mt10">
			<div class="displayFlexBet w100">
				<div style="background: #EAEFF3;flex: 4;height: 264px;display: flex;justify-content: space-between;">
					<div style="width:404px;height:264px" id="model-display" ref="modelDisplay">
						<!-- <img src="@/assets/sIcon130.png" style="width:404px;height:264px" /> -->
					</div>
					<div style="flex: 2;padding: 20px 10px;">
						<div style="color: #000;font-size: 18px;margin-bottom: 20px;">{{dataList2.defenceName}}</div>
						<div style="position: relative;width: 85px;" class="mb10">
							<div style="color: #000;font-size: 14px;z-index: 100;">记录运行参数</div>
							<div style="background: #D4D5FA;height: 10px;width: 100%;margin-top: -10px;"></div>
						</div>
						<div style="white-space: wrap;">
							<div v-for="(item2,index2) in dataList2.recordParameterList" :key="index2"
								style="width: 50%;display: inline-block;margin-bottom: 10px;">
								<div class="font13" style="color: #666;">{{item2.parameterName}}</div>
								<div class="font18" style="color: #333;">{{item2.amount}}{{item2.unitCode}}</div>
							</div>
						</div>
					</div>
				</div>
				<div style="flex: 3;margin-left: 20px;">
					<div style="color: #333;" class="font14 mb5">{{dataList2.useDate}}投运</div>
					<div style="display: flex;justify-content: space-between;">
						<div style="border-left: 1px solid#E7E7E7;line-height: 50px;color: #333;flex:1;height: 241px;overflow-y: auto;"
							class="text-left" v-if="dataList2.planParameterList">

							<div class="pl20">设计运行参数</div>
							<div class="pl20" v-for="(item,index) in dataList2.planParameterList" :key="index"
								:style="{'background':index%2==0?'#F9F9F9':'#fff'}">
								{{item.parameterName}}{{item.designValueStr}}{{item.unitValue}}
							</div>
							<div v-if="dataList2.planParameterList.length == 0" class="color888 textCenter">暂无内容</div>
						</div>

						<div style="border-left: 1px solid#E7E7E7;line-height: 50px;color: #333;flex:1;height: 241px;overflow-y: auto;"
							class="text-left">
							<div class="pl20">药剂耗材</div>
							<div class="pl20" v-for="(item,index) in dataList2.materialList" :key="index"
								:style="{'background':index%2==0?'#F9F9F9':'#fff'}">
								{{item.materialName}}
							</div>
							<div v-if="dataList2.materialList && dataList2.materialList.length == 0"
								class="color888 textCenter">暂无内容</div>
						</div>

						<div style="border-left: 1px solid#E7E7E7;line-height: 50px;color: #333;flex:1;height: 241px;overflow-y: auto;"
							class="text-left">
							<div class="pl20">巡检项目</div>
							<div class="pl20" v-for="(item,index) in dataList2.itemList" :key="index"
								:style="{'background':index%2==0?'#F9F9F9':'#fff'}">
								{{item.inspectItemName}}
							</div>
							<div v-if="dataList2.itemList && dataList2.itemList.length == 0" class="color888 textCenter">暂无内容</div>
						</div>
					</div>
				</div>
			</div>

			<div class="displayFlexBet mt20">
				<div style="background:#63CD92;flex: 1;padding: 10px 30px;position: relative;height: 150px;"
					class="bra8">				
					<div class="displayFlex">
						<div class="listItem1"
							style="width: 120px;height: 120px;border-radius: 50%;line-height: 120px;color: #fff;text-align: center;font-size: 18px;">
							{{dataList3.inspect.percent}}%
						</div>
						<div style="color: #fff;font-size: 13px;margin-left: 20px;">巡检</div>
					</div>

					<img src="@/assets/sIcon126.png"
						style="position: absolute;right: 20px;bottom: 20px;width: 70px;height: 70px;" />
				</div>

				<div style="background:#4F55C3;flex: 1;padding: 10px 30px;position: relative;height: 150px;"
					class="bra8 ml20 mr20">
					<div class="displayFlex">
						<div class="listItem2"
							style="width: 120px;height: 120px;border-radius: 50%;line-height: 120px;color: #fff;text-align: center;font-size: 18px;">
							{{dataList3.stdBook.percent}}%
						</div>
						<div style="color: #fff;font-size: 13px;margin-left: 20px;">台账</div>
					</div>

					<img src="@/assets/sIcon124.png"
						style="position: absolute;right: 20px;bottom: 20px;width: 70px;height: 70px;" />
				</div>

				<div style="background:#8AD4F1;flex: 1;padding: 10px 30px;position: relative;height: 150px;"
					class="bra8">
					<div class="displayFlex">
						<div class="listItem3"
							style="width: 120px;height: 120px;border-radius: 50%;line-height: 120px;color: #fff;text-align: center;font-size: 18px;">
							{{dataList3.problem.percent}}%
						</div>
						<div style="color: #fff;font-size: 13px;margin-left: 20px;">问题工单</div>
					</div>
					<img src="@/assets/sIcon127.png"
						style="position: absolute;right: 20px;bottom: 20px;width: 70px;height: 70px;" />
				</div>
			</div>

			<div class="mt20" id="chart1" style="width: 100%;height: 300px;"></div>
		</div>

		<div v-if="menuIndex == 'two'" class="mt10" style="height:100%">
			<defDetOrder :defenceId="params.defenceId" :outletId="dataList1.outletId"></defDetOrder>
		</div>

		<div v-if="menuIndex == 'three'" class="mt10">
			<defInspectStdBook :defenceId="params.defenceId" :outletId="dataList1.outletId"></defInspectStdBook>
		</div>

		<div v-if="menuIndex == 'four'" class="mt10">
			<defMaterialUse :defenceId="params.defenceId" :outletId="dataList1.outletId"></defMaterialUse>
		</div>

		<div v-if="menuIndex == 'five'" class="mt10">
			<defRunOrder :defenceId="params.defenceId" :outletId="dataList1.outletId"></defRunOrder>
		</div>

		<div v-if="menuIndex == 'six'" class="mt10">
			<el-empty />
		</div>
		
		<div v-if="menuIndex == 'seven'" class="mt10">
			<installationWarning :installationId="params.defenceId"></installationWarning>
		</div>

	</div>
</template>

<script>
	import defDetOrder from './components/defDetOrder'
	import defInspectStdBook from './components/defInspectStdBook'
	import defMaterialUse from './components/defMaterialUse'
	import defRunOrder from './components/defRunOrder'
	import installationWarning from './components/installationWarning'
	
	import * as echarts from 'echarts';
	// 1.引入
	import * as THREE from "three";
	import {
		OrbitControls
	} from "three/examples/jsm/controls/OrbitControls";
	import {
		GLTFLoader
	} from "three/examples/jsm/loaders/GLTFLoader";
	import {
		RoomEnvironment
	} from "three/examples/jsm/environments/RoomEnvironment";
	import {
		MeshoptDecoder
	} from "three/examples/jsm/libs/meshopt_decoder.module";

	let that
	let scene
	let camera
	let renderer
	let control
	export default {
		components: {
			defDetOrder,
			defInspectStdBook,
			defMaterialUse,
			defRunOrder,
			installationWarning
		},
		data() {
			return {
				params: {
					defenceId: ''
				},
				dataList1: {},
				dataList2: {},
				dataList3: {},
				menuIndex: "one",
				chooseItem: {}
			}
		},
		mounted: function() {
			that = this
			that.params.defenceId = that.$route.query.defenceId
			that.getOutletInspectDefDet()

			setTimeout(function() {
				that.initCanvas()
				that.loader()
			}, 2000)
		},

		methods: {

			chooseDefence(item) {
				that.params.defenceId = item.defenceId
				//that.chooseItem = item
				that.menuIndex = "one"
				that.getOutletInspectDefDet()
			},

			getOutletInspectDefDet() {
				that.ajax({
					url: '/gasOutlet/defDet/getOutletInspectDefDet',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList1 = result.data
							for (let item of that.dataList1.defenceList) {
								if (item.defenceId == that.params.defenceId) {
									that.chooseItem = item
								}
							}
						}
						that.getInspectDefDet()
						that.countStatistics()
						that.countTotalMaterialUse()
					},
				}, "加载中...")
			},

			getInspectDefDet() {
				that.ajax({
					url: '/gasOutlet/defDet/getInspectDefDet',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList2 = result.data
						}
						console.log(that.dataList2)
					},
				}, "加载中...")
			},

			countStatistics() {
				that.ajax({
					url: '/gasOutlet/defDet/countStatistics',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList3 = result.data
						}
						console.log(that.dataList3)
					},
				}, "加载中...")
			},

			//初始化
			initCanvas() {
				const _this = this;
				const domDiv = document.getElementById("model-display");

				// 场景，相机
				scene = new THREE.Scene();
				this.initCamera(domDiv);

				// 渲染器
				// 参数 antialias: true 为开启抗锯齿
				renderer = new THREE.WebGLRenderer({
					antialias: true
				});
				renderer.setSize(domDiv.offsetWidth, domDiv.offsetHeight);
				renderer.setClearColor(0x000000, 0);
				domDiv.appendChild(renderer.domElement);
				// 材质
				const environment = new RoomEnvironment();
				const pmremGenerator = new THREE.PMREMGenerator(renderer);
				scene.environment = pmremGenerator.fromScene(environment).texture;
				this.initControl();
				// 坐标系
				//   const axesHelper = new THREE.AxesHelper(14);
				//   scene.add(axesHelper);
				function animate() {
					requestAnimationFrame(animate);
					renderer.render(scene, camera);
				}
				animate();
			},
			initCamera(domDiv) {
				camera = new THREE.PerspectiveCamera(
					45,
					domDiv.offsetWidth / domDiv.offsetHeight,
					1,
					2200
				);
				camera.position.set(-70, -10, 50);
				//设置相机默认看向哪里   三个 0  代表 默认看向原点
				camera.lookAt(0, 0, 0);
			},
			initControl() {
				// 控制器
				control = new OrbitControls(camera, renderer.domElement);
			},
			// 当选择的模型发生变化时，调用loader方法
			loader() {
				const _this = this;
				const loader = new GLTFLoader();
				loader.load(
					'https://demo-1254184403.cos.ap-chengdu.myqcloud.com/SCR.glb',
					(gltf) => {
						scene.add(_this.editModel(gltf.scene));
						renderer.render(scene, camera);
					}
				);
			},
			// 调整模型缩放
			editModel(_scene) {
				const boxHelper = new THREE.BoxHelper(_scene);
				boxHelper.geometry.computeBoundingBox();
				const box = boxHelper.geometry.boundingBox;
				const maxDiameter = Math.max(
					box.max.x - box.min.x,
					box.max.y - box.min.y,
					box.max.z - box.min.z
				);
				const scale = camera.position.z / maxDiameter;
				_scene.scale.set(scale, scale, scale); // 调整模型缩放
				_scene.position.set(0, 0, 0);
				return _scene;
			},
			// 关闭后清除画布，保证下次打开的时候是空白画布
			disposeScene(scene) {
				while (scene.children.length > 0) {
					let obj = scene.children[0];
					scene.remove(obj);
					if (obj.geometry) {
						obj.geometry.dispose();
					}
					if (obj.material) {
						if (Array.isArray(obj.material)) {
							obj.material.forEach((material) => {
								material.dispose();
							});
						} else {
							obj.material.dispose();
						}
					}
				}
				renderer.clear();
			},

			countTotalMaterialUse() {
				setTimeout(function() {
					that.ajax({
						url: '/gasOutlet/defDet/countTotalMaterialUse',
						data: JSON.stringify(that.params),
						contentType: 'application/json',
						success: function(result) {
							let xAxisData = []
							let seriesData1 = []
							for (let item of result.data) {
								xAxisData.push(item.materialName)
								seriesData1.push(item.qty)
							}
							var chartDom = document.getElementById('chart1');
							var myChart = echarts.init(chartDom);
							var option;

							option = {
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										type: 'shadow'
									}
								},
								legend: {
									x: 'right', // 可设定图例在左、右、居中
									y: 'center', // 可设定图例在上、下、居中
									left: 'right',
									orient: "vertical"
								},
								grid: {
									left: '3%',
									right: '4%',
									bottom: '3%',
									containLabel: true
								},
								xAxis: [{
									type: 'category',
									data: xAxisData,
									//show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
									axisTick: {
										show: false // 不显示坐标轴刻度线
									},
									axisLine: {
										show: false, // 不显示坐标轴线
									},
									axisLabel: {
										show: true, // 不显示坐标轴上的文字
									},
									splitLine: {
										show: false // 不显示网格线
									}
								}],
								yAxis: [{
									type: 'value',
									//show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
									axisTick: {
										show: false // 不显示坐标轴刻度线
									},
									axisLine: {
										show: false, // 不显示坐标轴线
									},
									axisLabel: {
										show: true, // 不显示坐标轴上的文字
									},
									splitLine: {
										show: false // 不显示网格线
									}
								}],
								series: [{

									type: 'bar',
									emphasis: {
										focus: 'series'
									},
									label: {
										show: true,
									},
									itemStyle: {
										// 设置柱状图颜色
										color: '#3A3EF4'
									},
									barWidth: '50',
									data: seriesData1
								}, ]
							};

							option && myChart.setOption(option);
						},
					}, "加载中...")
				}, 1000)

			},

		}
	}
</script>

<style scoped>
	.selected {
		color: #3A3EF4 !important;
	}
	
	.listItem1 {
		background-image: url('../../assets/sIcon139.png');
		background-size: 100% 100%;
	}
	
	.listItem2 {
		background-image: url('../../assets/sIcon125.png');
		background-size: 100% 100%;
	}
	
	.listItem3 {
		background-image: url('../../assets/sIcon140.png');
		background-size: 100% 100%;
	}
</style>